<template>
  <view class="fixed">
    <nav-bar title="隐患处理" leftArrow></nav-bar>
    <view class="universal-head">
      <view class="universal-head-title">工程：{{detail.projectName || '-'}}</view>
      <view class="universal-status" :class="detailState.value === '4' ? 'universal-status-success' : 'universal-status-warning'">{{detailState.label}}</view>
    </view>
    <troble-detail v-model="detail"></troble-detail>
    <detail-assign v-model="detail" v-if="compShow.detailAssign"></detail-assign>
    <detail-handle v-model="detail" v-if="compShow.detailHandle"></detail-handle>
    <detail-check v-model="detail" v-if="compShow.detailCheck"></detail-check>

    <form-assign v-model="detail" v-if="_isCanOpt && compShow.formAssign" @cancel="onCancel" @confirm="onConfirm"></form-assign>
    <form-handle v-model="detail" v-if="_isCanOpt && compShow.formHandle" @cancel="onCancel" @confirm="onConfirm"></form-handle>
    <form-check v-model="detail" v-if="_isCanOpt && compShow.formCheck" @cancel="onCancel" @confirm="onConfirm"></form-check>
    <form-assign-other v-model="detail" v-if="_isCanOpt && compShow.formAssignOther" @cancel="onCancel" @confirm="onConfirmOther"></form-assign-other>

    <!-- 
      状态值
      1 已上报 初始状态
      2 待上报 - 发起维修后
      3 待审核
      4 已完成
      5 已指派
      -->
    <view v-if="_isCanOpt && compShow.wait" class="universal-footer">
      <van-button @click="onSumbit" class="universal-footer-button" block icon="guide-o" plain type="primary">立即处置</van-button>
      <van-button
       v-if="detailState.value !== '5'" @click="onAssign" class="universal-footer-button"block icon="contact-o" plain type="success"
      >指派人员</van-button>
      <van-button 
        v-if="compShow.repair" @click="onAssignOther('repair')" class="universal-sal-footer-button" block plain icon="bulb-o" type="primary"
      >发起维修</van-button>
      <van-button 
        v-if="compShow.maintain" @click="onAssignOther('maintain')" class="universal-footer-button" block plain icon="shield-o" type="primary"
      >发起养护</van-button>
    </view>
  </view>
</template>

<script setup>
import trobleDetail from './components/troble-detail';
import detailAssign from './components/detail-assign';
import detailHandle from './components/detail-handle';
import detailCheck from './components/detail-check';
import formAssign from './components/form-assign';
import formAssignOther from './components/form-assign-other';
import formHandle from './components/form-handle';
import formCheck from './components/form-check';

import dayjs from 'dayjs';
import { reactive, ref, computed } from 'vue';
import { splitFilesToImageVideo } from '@/utils/index';

import { apiHiddenTrobleRepair, apiHiddenTrobleMainTain, apiHiddenTrobleSumbitDetail } from '@/api/hiddenTroble';

import store from '@/store'

const path = defineProps({
  id: String,
  state: String,
});

const userInfo = store.getters.GET_USER_INFO.sysUser;
const currentUserId = ref(Number(userInfo.userId) || '');

const loading = ref({
  repair: false,
  maintain: false,
});
let detail = ref({});
const _isCanOpt = computed(() => {
	const todoUsers = detail.value?.todoUsers || [];
	return !!todoUsers.find(it => it == currentUserId.value);
})
let detailState = ref({});
let compShow = reactive({
  wait: false,
  detailAssign: false,
  detailHandle: false,
  detailCheck: false,
  formAssign: false,
  formAssignOther: false,
  formHandle: false,
  formCheck: false,
  repair: false,
  maintain: false,
});
let assignType = 'repair';

// 指派人员
const onAssign = () => {
  compShow.formAssign = true;
  compShow.wait = false;
}
// 维修养护指派人员
const onAssignOther = (type) => {
  compShow.formAssignOther = true;
  compShow.wait = false;
  assignType = type
};

const onConfirmOther = (value) => {
  const params = {
    ...detail.value,
    ...value,
  }
  assignType === 'repair' ? onRepair(params) : onMaintain(params);
}

// 操作完毕
const onConfirm = () => {
  uni.redirectTo({ url: '/pages/hiddenTroble/index' });
};

// 处置
const onSumbit = () => {
  compShow.formHandle = true;
  compShow.wait = false;
}
// 取消
const onCancel = () => {
  onInit();
  compShow.wait = true;
}
// 状态初始化
const onInit = () => {
  compShow.wait = false;
  compShow.detailAssign =  false;
  compShow.detailHandle =  false;
  compShow.detailCheck =  false;
  compShow.formAssign =  false;
  compShow.formHandle =  false;
  compShow.formCheck =  false;
  compShow.repair =  false;
  compShow.maintain =  false;
}

// 发起维修
const onRepair = (params) => {
  loading.value.repair = true;
  apiHiddenTrobleRepair(params).then(res => {
    compShow.wait = false;
    // getDetail();
    loading.value.repair = false;
    uni.redirectTo({ url: '/pages/hiddenTroble/index' });
  })
}
//发起养护
const onMaintain = (params) => {
  loading.value.maintain = true;
  apiHiddenTrobleMainTain(params).then(res => {
    compShow.wait = false;
    // getDetail();
    loading.value.maintain = false;
    uni.redirectTo({ url: '/pages/hiddenTroble/index' });
  })
}

const getDetail = () => {
  apiHiddenTrobleSumbitDetail({
    value: path.id
  }).then(res => {
    const { state } = res;
    detail.value = {
      ...res,
    }
    detailState.value = state;
    /*
    1 已上报
    2 待上报 - 发起维修后
    3 待审核
    4 已完成
    5 已指派
    */
    onInit();
    switch (state.value) {
      case '1': 
        compShow.wait = true;
        compShow.repair = true;
        compShow.maintain = true;
        break;
      case '2': 
        break;
      case '3': 
        compShow.detailAssign =  true;
        compShow.detailHandle =  true;
        compShow.formCheck = true;
        break;
      case '4': 
        compShow.detailCheck = true;
        compShow.detailAssign =  true;
        compShow.detailHandle =  true;
        break;
      case '5': 
        compShow.detailAssign = true;
        compShow.formHandle =  true;
        break;
    }
  })
};

/* const getSumbitDetail = () => {
  apiHiddenTrobleSumbitDetail({
    value: path.id
  }).then(res => {
    console.log('res', res);
  })
};
getSumbitDetail() */
getDetail();
</script>

<style lang="scss" scoped>
@import '@/assets/universal-page.scss';
</style>